<template>
    <span :class='{"update-data": !noIconForCol && (isUpdate || isAddNode(data.id))}' class='show-span'>
        <a-select class="edit-content" v-if="isEdit" v-model="inpValue" @change='selChange'>
            <a-select-option v-for="item in columnInfo.editInfo" :key='item.value' :value="item.value">
                {{item.label}}
            </a-select-option>
        </a-select>
        <template v-else>
            <a-select v-if="editAble || isAddData" ref='ref_sel' class='show-sel' dropdownClassName='plan-drop-ops'
                v-model="inpValue" :defaultOpen='!isAddData' @change='modelChange($event)' @blur='editAble = false'>
                <a-select-option v-for="item in columnInfo.editInfo" :key='item.value' :value="item.value">
                    {{item.label}}
                </a-select-option>
            </a-select>
            <span v-else class='show-span' @click="showSel">{{getShowName()}}</span>
        </template>
    </span>
</template>
<script>
import { mapGetters } from 'vuex'
import mix from '../js/mainTable'
export default {
    mixins:[mix],
    computed: {
        ...mapGetters({
            editColumns: 'getEditColumns',
            keyNodeOpterable: 'getKeyNodeOpterable'
        }),
        isAddData() {
            return this.data.addNode != undefined && this.data.addNode 
                && this.editColumns.includes(this.columnInfo.dataIndex)
        }
    },
    methods: {
        getShowName() {
            if(this.columnInfo.editInfo != undefined && this.columnInfo.editInfo.length > 0) {
                const back = this.columnInfo.editInfo.find(item => item.value == this.inpValue)
                if(back != undefined)
                    return back.label
            }
            return ''
        },
        modelChange(value,ops,ev) {
            if(!this.isAddData)
                this.editAble = false
            else {
                this.$store.state.planTable.stopPropagation = true;
            }
            if (this.inpValue != this.data[this.word]) {
                this.$emit('update',this.inpValue)
            }
        },
        selChange(value) {
            this.$emit('update',value)
        },
        showSel() {
            if (this.getAction() && this.data.actionPerssion && this.statePermission &&
                this.columnInfo.edit && (this.data['lock.locked'] == undefined || !this.data['lock.locked'])) {
                this.editAble = true
                this.$nextTick(() => {
                    this.$refs.ref_sel.focus();
                })
            }
        },
        //四级节点只有父节点可编辑，编辑者父子节点都能编辑，其他只能子节点, 如果是关键节点则必须keyNodeOpterable等于true
        getAction() {
            switch(this.columnInfo.dataIndex) {
                case 'FourthNode':
                    return !this.isChild
                break;
                case 'KeyNode':
                    return this.keyNodeOpterable && this.isChild
                break;
                case 'editorReference':
                    return true
                break;
                default:
                    return this.isChild
            }
        }
    }
}
</script>
<style scoped>
.edit-content {
    width: 100%;
}
.show-span {
    height: 100%;
    width: 100%;
    display: block;
    min-height: 21px;
}
.show-sel{
    width: 100%
}
</style>